<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>双向文件传输</title>
  <link rel="icon" href="{{ url_for('static', filename='favicon.svg') }}" type="image/svg+xml" />
  <link href="{{ url_for('static', filename='output.css') }}" rel="stylesheet" />
  </head>

  <body class="bg-gray-50 min-h-screen flex items-center justify-center p-5">
    <div class="w-full max-w-4xl bg-white rounded-xl shadow-sm overflow-hidden">
      <header class="bg-gray-900 text-white px-8 py-12 text-center">
        <h1 class="text-3xl font-semibold mb-3">双向文件传输系统</h1>
        <p class="text-gray-300 max-w-md mx-auto">在电脑和移动设备之间轻松传输文件</p>
      </header>

      <div class="p-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
          <div class="bg-white border border-gray-200 rounded-lg p-8 text-center transition-all hover:shadow-md hover:-translate-y-1">
            <div class="text-5xl mb-6">📤</div>
            <h3 class="text-xl font-medium text-gray-800 mb-3">上传文件到电脑</h3>
            <p class="text-gray-600 mb-6">将移动设备上的文件传输到您的电脑</p>
            <a href="/upload" class="inline-block px-8 py-3 bg-gray-800 text-white rounded-lg font-medium hover:bg-gray-700 transition-colors">开始上传</a>
          </div>

          <div class="bg-white border border-gray-200 rounded-lg p-8 text-center transition-all hover:shadow-md hover:-translate-y-1">
            <div class="text-5xl mb-6">📥</div>
            <h3 class="text-xl font-medium text-gray-800 mb-3">从电脑下载文件</h3>
            <p class="text-gray-600 mb-6">将电脑中的文件传输到您的移动设备</p>
            <a href="/download" class="inline-block px-8 py-3 bg-gray-600 text-white rounded-lg font-medium hover:bg-gray-500 transition-colors">浏览文件</a>
          </div>
        </div>

        <div class="bg-gray-50 border border-gray-200 rounded-lg p-6">
          <h2 class="text-lg font-medium text-gray-800 mb-4 flex items-center"><span class="text-xl mr-2">📱</span> 使用指南</h2>
          <ul class="list-disc pl-5 space-y-2 text-gray-700">
            <li>确保所有设备在同一Wi-Fi网络下</li>
            <li>上传功能：支持多个文件同时上传</li>
            <li>下载功能：可下载电脑中的电脑的"downloads"文件夹下的文件</li>
            <li>访问地址: <code id="serviceUrl" class="bg-gray-200 px-2 py-1 rounded text-sm font-mono">加载中...</code></li>
          </ul>
        </div>
      </div>

      <footer class="bg-gray-100 border-t border-gray-200 py-6 text-center text-gray-600 text-sm">
        <p>© 2025 双向文件传输系统 | 安全本地传输 | 无需第三方服务</p>
      </footer>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", () => {
        document.getElementById("serviceUrl").textContent = window.location.origin;
      });
    </script>
  </body>
</html>
